<!DOCTYPE HTML>
<html lang="zh-CN">


<head>
    <meta charset="utf-8">
    <meta name="keywords" content="HTML+CSS模糊点整理, 博客，hexo，live2d，html， css， js， node， vue，">
    <meta name="description" content="">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- Global site tag (gtag.js) - Google Analytics -->


    <title>HTML+CSS模糊点整理 | codeHose9</title>
    <link rel="icon" type="image/png" href="/blog/favicon.png">

    <link rel="stylesheet" type="text/css" href="/blog/libs/awesome/css/all.css">
    <link rel="stylesheet" type="text/css" href="/blog/libs/materialize/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="/blog/libs/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="/blog/libs/animate/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/blog/libs/lightGallery/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/blog/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/blog/css/my.css">

    <script src="/blog/libs/jquery/jquery.min.js"></script>

<meta name="generator" content="Hexo 4.2.1"><link rel="alternate" href="/blog/atom.xml" title="codeHose9" type="application/atom+xml">
<link rel="stylesheet" href="/blog/css/prism-tomorrow.css" type="text/css">
<link rel="stylesheet" href="/blog/css/prism-line-numbers.css" type="text/css"></head>


<body>
    <header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="nav-wrapper container">
            <div class="brand-logo">
                <a href="/blog/" class="waves-effect waves-light">
                    
                    <img src="/blog/medias/logo.png" class="logo-img" alt="LOGO">
                    
                    <span class="logo-span">codeHose9</span>
                </a>
            </div>
            

<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fas fa-bars"></i></a>
<ul class="right nav-menu">
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/" class="waves-effect waves-light">
      
      <i class="fas fa-home" style="zoom: 0.6;"></i>
      
      <span>首页</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/tags" class="waves-effect waves-light">
      
      <i class="fas fa-tags" style="zoom: 0.6;"></i>
      
      <span>标签</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/categories" class="waves-effect waves-light">
      
      <i class="fas fa-bookmark" style="zoom: 0.6;"></i>
      
      <span>分类</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/archives" class="waves-effect waves-light">
      
      <i class="fas fa-archive" style="zoom: 0.6;"></i>
      
      <span>归档</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/about" class="waves-effect waves-light">
      
      <i class="fas fa-user-circle" style="zoom: 0.6;"></i>
      
      <span>关于</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/contact" class="waves-effect waves-light">
      
      <i class="fas fa-comments" style="zoom: 0.6;"></i>
      
      <span>留言板</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/friends" class="waves-effect waves-light">
      
      <i class="fas fa-address-book" style="zoom: 0.6;"></i>
      
      <span>友情链接</span>
    </a>
    
  </li>
  
  <li>
    <a href="#searchModal" class="modal-trigger waves-effect waves-light">
      <i id="searchIcon" class="fas fa-search" title="搜索" style="zoom: 0.85;"></i>
    </a>
  </li>
</ul>


<div id="mobile-nav" class="side-nav sidenav">

    <div class="mobile-head bg-color">
        
        <img src="/blog/medias/logo.png" class="logo-img circle responsive-img">
        
        <div class="logo-name">codeHose9</div>
        <div class="logo-desc">
            
            Never really desperate, only the lost of the soul.
            
        </div>
    </div>

    

    <ul class="menu-list mobile-menu-list">
        
        <li class="m-nav-item">
	  
		<a href="/blog/" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-home"></i>
			
			首页
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/blog/tags" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-tags"></i>
			
			标签
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/blog/categories" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-bookmark"></i>
			
			分类
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/blog/archives" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-archive"></i>
			
			归档
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/blog/about" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-user-circle"></i>
			
			关于
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/blog/contact" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-comments"></i>
			
			留言板
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/blog/friends" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-address-book"></i>
			
			友情链接
		</a>
          
        </li>
        
        
        <li><div class="divider"></div></li>
        <li>
            <a href="https://github.com/blinkfox/hexo-theme-matery" class="waves-effect waves-light" target="_blank">
                <i class="fab fa-github-square fa-fw"></i>matery
            </a>
        </li>
        
    </ul>
</div>


        </div>

        
            <style>
    .nav-transparent .github-corner {
        display: none !important;
    }

    .github-corner {
        position: absolute;
        z-index: 10;
        top: 0;
        right: 0;
        border: 0;
        transform: scale(1.1);
    }

    .github-corner svg {
        color: #0f9d58;
        fill: #fff;
        height: 64px;
        width: 64px;
    }

    .github-corner:hover .octo-arm {
        animation: a 0.56s ease-in-out;
    }

    .github-corner .octo-arm {
        animation: none;
    }

    @keyframes a {
        0%,
        to {
            transform: rotate(0);
        }
        20%,
        60% {
            transform: rotate(-25deg);
        }
        40%,
        80% {
            transform: rotate(10deg);
        }
    }
</style>

<a href="https://github.com/blinkfox/hexo-theme-matery" class="github-corner tooltipped hide-on-med-and-down" target="_blank"
   data-tooltip="matery" data-position="left" data-delay="50">
    <svg viewBox="0 0 250 250" aria-hidden="true">
        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
        <path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
              fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
        <path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
              fill="currentColor" class="octo-body"></path>
    </svg>
</a>
        
    </nav>

</header>

    



<div class="bg-cover pd-header post-cover" style="background-image: url('/blog/medias/featureimages/9.jpg')">
    <div class="container" style="right: 0px;left: 0px;">
        <div class="row">
            <div class="col s12 m12 l12">
                <div class="brand">
                    <h1 class="description center-align post-title">HTML+CSS模糊点整理</h1>
                </div>
            </div>
        </div>
    </div>
</div>




<main class="post-container content">

    
    <link rel="stylesheet" href="/blog/libs/tocbot/tocbot.css">
<style>
    #articleContent h1::before,
    #articleContent h2::before,
    #articleContent h3::before,
    #articleContent h4::before,
    #articleContent h5::before,
    #articleContent h6::before {
        display: block;
        content: " ";
        height: 100px;
        margin-top: -100px;
        visibility: hidden;
    }

    #articleContent :focus {
        outline: none;
    }

    .toc-fixed {
        position: fixed;
        top: 64px;
    }

    .toc-widget {
        width: 345px;
        padding-left: 20px;
    }

    .toc-widget .toc-title {
        margin: 35px 0 15px 0;
        padding-left: 17px;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.5rem;
    }

    .toc-widget ol {
        padding: 0;
        list-style: none;
    }

    #toc-content {
        height: calc(100vh - 250px);
        overflow: auto;
    }

    #toc-content ol {
        padding-left: 10px;
    }

    #toc-content ol li {
        padding-left: 10px;
    }

    #toc-content .toc-link:hover {
        color: #42b983;
        font-weight: 700;
        text-decoration: underline;
    }

    #toc-content .toc-link::before {
        background-color: transparent;
        max-height: 25px;

        position: absolute;
        right: 23.5vw;
        display: block;
    }

    #toc-content .is-active-link {
        color: #42b983;
    }

    #floating-toc-btn {
        position: fixed;
        right: 15px;
        bottom: 76px;
        padding-top: 15px;
        margin-bottom: 0;
        z-index: 998;
    }

    #floating-toc-btn .btn-floating {
        width: 48px;
        height: 48px;
    }

    #floating-toc-btn .btn-floating i {
        line-height: 48px;
        font-size: 1.4rem;
    }
</style>
<div class="row">
    <div id="main-content" class="col s12 m12 l9">
        <!-- 文章内容详情 -->
<div id="artDetail">
    <div class="card">
        <div class="card-content article-info">
            <div class="row tag-cate">
                <div class="col s7">
                    
                    <div class="article-tag">
                        
                            <a href="/blog/tags/html/">
                                <span class="chip bg-color">html</span>
                            </a>
                        
                            <a href="/blog/tags/css/">
                                <span class="chip bg-color">css</span>
                            </a>
                        
                    </div>
                    
                </div>
                <div class="col s5 right-align">
                    
                    <div class="post-cate">
                        <i class="fas fa-bookmark fa-fw icon-category"></i>
                        
                            <a href="/blog/categories/%E5%89%8D%E7%AB%AF/" class="post-category">
                                前端
                            </a>
                        
                    </div>
                    
                </div>
            </div>

            <div class="post-info">
                
                <div class="post-date info-break-policy">
                    <i class="far fa-calendar-minus fa-fw"></i>发布日期:&nbsp;&nbsp;
                    2020-07-16
                </div>
                

                
                <div class="post-date info-break-policy">
                    <i class="far fa-calendar-check fa-fw"></i>更新日期:&nbsp;&nbsp;
                    2020-09-01
                </div>
                

                
                <div class="info-break-policy">
                    <i class="far fa-file-word fa-fw"></i>文章字数:&nbsp;&nbsp;
                    6.4k
                </div>
                

                
                <div class="info-break-policy">
                    <i class="far fa-clock fa-fw"></i>阅读时长:&nbsp;&nbsp;
                    25 分
                </div>
                

                
                    <div id="busuanzi_container_page_pv" class="info-break-policy">
                        <i class="far fa-eye fa-fw"></i>阅读次数:&nbsp;&nbsp;
                        <span id="busuanzi_value_page_pv"></span>
                    </div>
				
            </div>
        </div>
        <hr class="clearfix">
        <div class="card-content article-card-content">
            <div id="articleContent">
                <h1 id="HTML-CSS模糊点整理"><a href="#HTML-CSS模糊点整理" class="headerlink" title="HTML+CSS模糊点整理"></a>HTML+CSS模糊点整理</h1><h2 id="边框"><a href="#边框" class="headerlink" title="边框"></a>边框</h2><ul>
<li>border-width:边框粗细</li>
<li>border-style:边框样式 solid 实线  dashed 虚线  dotted 点线</li>
<li>border-collapse:collapse 合并相邻的单元格，比如表格的右侧和另一个表格的左侧合到了一起，边框就会叠加，要想不叠加就可以使用这个</li>
</ul>
<h2 id="padding"><a href="#padding" class="headerlink" title="padding"></a>padding</h2><ul>
<li>如果不设置宽度或者高度的话，padding是不会在该方向撑大盒子</li>
</ul>
<h2 id="margin"><a href="#margin" class="headerlink" title="margin"></a>margin</h2><p>如果是行内元素或者是行内块状元素，可以给他的父类设置text-align:center 让盒子居中显示，如果是块状元素则只能通过margin:0 auto;来设置，但是会导致<code>塌陷</code>问题。<br>解决嵌套块级元素设置垂直外边距导致塌陷问题：</p>
<ol>
<li>给父元素设置 overflow:hiddle 属性，比较常用</li>
<li>给父元素设置上边框 border-top: 1px solid transparent;transparent透明边框</li>
<li>给父元素设置上内边距</li>
<li>给子元素或者父元素设置浮动</li>
<li>给子元素或者父元素设置固定定位<br>尽量不要设置行内元素的上内外边距，margin-top不起效果，padding-top会撑到外面去，变为行内块状元素或者块状元素再设置。</li>
</ol>
<h2 id="圆角边框-border-radius"><a href="#圆角边框-border-radius" class="headerlink" title="圆角边框 border-radius"></a>圆角边框 border-radius</h2><p>原理：数值越大，圆的半径越大，半径越大圆角边框的弧度越大，弧度越大，边框越圆<br>1个数值对应四个角 2个数值对象左上角和右下角，右上角和左下角<br>3个数值对应 左上角 右上角 左下角和左下角 4个数值对应 左上角 右上角 右下角 左下角(顺时针)</p>
<h2 id="浮动"><a href="#浮动" class="headerlink" title="浮动"></a>浮动</h2><ul>
<li>使用浮动的原因：有很多网页布局效果是没有办法使用标准流来实现的，此时就可以使用浮动流来实现，因为浮动可以改变默认的排列方式</li>
<li>网页布局的第一准则：多个快级元素纵向排列使用标准流，多个块级元素横向排列使用浮动流</li>
<li>注：display:inline-block虽然也可以使横向排列但是会有默认的样式，同时也还有很多其他的网页布局效果无法实现</li>
</ul>
<h3 id="浮动的特性"><a href="#浮动的特性" class="headerlink" title="浮动的特性"></a>浮动的特性</h3><ul>
<li>脱离标准流，浮动起来了，不会保留原先的位置(会被下面没有设置的块状元素替代)</li>
</ul>
<ul>
<li>在一行显示并且顶部对齐</li>
<li>具有行内块状元素的一些特性，给一个行内元素添加浮动，具有了行内块状元素的特性就可以设置宽度和高度不给一个块级元素设置宽度默认是100%但是给他设置浮动之后就会具有行内块状元素的特性就会是内容的宽度</li>
</ul>
<h3 id="浮动布局注意点"><a href="#浮动布局注意点" class="headerlink" title="浮动布局注意点"></a>浮动布局注意点</h3><ul>
<li>浮动和标准流的父盒子搭配使用<br>先用标准流的父元素排列上下位置，之后在其内部使用浮动布局</li>
</ul>
<h3 id="浮动会导致的问题"><a href="#浮动会导致的问题" class="headerlink" title="浮动会导致的问题"></a>浮动会导致的问题</h3><p>有些情况下我们是不需要设置父盒子的高度的，给父盒子里面的子盒子设置浮动之后是会浮动起来的脱离了原来的文档流，所以后面的块状元素就会上来导致<code>排版</code>问题，解决方法(清除浮动的方法)：</p>
<ol>
<li>额为标签法：在最后面的子盒子后面再添加一个块级元素盒子，盒子不需要设置宽高啥的，设置clear:both清除浮动属性就可以</li>
<li>给父盒子设置overflow:hidden清除浮动，优点：代码简洁，缺点：无法显示溢出部分</li>
<li>给父盒子添加 <pre class="line-numbers language-highlight css"><code class="language-highlight css">.clearfix:after{ <!-- .clearfix 给父盒子取得类名-->
	<span class="selector-tag">content</span>: "";
	<span class="selector-tag">display</span>: <span class="selector-tag">block</span>; <!<span class="selector-tag">--</span> <span class="selector-tag">after</span>伪类会把快级元素转换为行内元素，所以要转换回来<span class="selector-tag">--</span>>
	<span class="selector-tag">height</span>: 0;
	<span class="selector-tag">clear</span>: <span class="selector-tag">both</span>;
	<span class="selector-tag">visibility</span>: <span class="selector-tag">hidden</span>;
}
<span class="selector-class">.clearfix</span>{
	*zoom: 1; <!-- 兼容ie6 7 浮动-->
}<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li>
<li>双伪元素清除浮动法 给父类添加<pre class="line-numbers language-highlight css"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:before</span>, <span class="selector-class">.clearfix</span><span class="selector-pseudo"><code class="language-highlight css"><span class="selector-class">.clearfix</span><span class="selector-pseudo">:before</span>, <span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span>{
	<span class="attribute">content</span>: <span class="string">""</span>;
	<span class="attribute">display</span>: table;
}
<span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span>{
	<span class="attribute">clear</span>: both;
}
<span class="selector-class">.clearfix</span><span class="selector-pseudo">:before</span>{
	*zoom: 1;
}<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

</li>
</ol>
<h2 id="定位"><a href="#定位" class="headerlink" title="定位"></a>定位</h2><ul>
<li>静态定位：position:static默认的定位方式，按照标准流的摆放位置，它没有偏移的功能</li>
<li>相对定位：position:relative相对于自己原先的位置定位，配合上下左右位移来使用，原先的位置会依然保留</li>
<li>绝对定位：position:absolute往上一级一级的查找，不会保留原先的位置</li>
<li>固定定位：position:fixed相对了浏览器的可视区为参照点,不会保留原先的位置</li>
<li><ul>
<li>固定在版心右侧的小技巧：left:50%(浏览器可视区的一半) + margin-left:版心的一半</li>
</ul>
</li>
<li>粘性定位：position:sticky 相对定位(占有原先位置)+固定定位(浏览器的可视区内移动)的结合,必须设置上下左右其一才有效果，表示当距离浏览器多少的时候改为固定定位。兼容性差，IE不支持</li>
<li><strong>当设置了多个定位属性盒子，发生了盒子的叠放问题的时候可以设置z-index在设置盒子的叠放次序，注：只有定位属性才有该效果</strong></li>
<li><ul>
<li>设置了固定或绝对定位属性的盒子设置margin:auto是没有效果的，要自己计算：left:50% - margin-left:减去盒子的一半</li>
</ul>
</li>
<li><strong><em>设置了定位属性的盒子和浮动一样，具有了行内块状元素的特点</em></strong></li>
</ul>
<h4 id="注：浮动是不会压住文字，图片等内容的，做到文字环绕效果，但是固定和绝对定位是会压住内容的，所以压住内容的布局是用定位来做的，左右排版用浮动。"><a href="#注：浮动是不会压住文字，图片等内容的，做到文字环绕效果，但是固定和绝对定位是会压住内容的，所以压住内容的布局是用定位来做的，左右排版用浮动。" class="headerlink" title="注：浮动是不会压住文字，图片等内容的，做到文字环绕效果，但是固定和绝对定位是会压住内容的，所以压住内容的布局是用定位来做的，左右排版用浮动。"></a>注：浮动是不会压住文字，图片等内容的，做到文字环绕效果，但是固定和绝对定位是会压住内容的，所以压住内容的布局是用定位来做的，左右排版用浮动。</h4><h2 id="显示与隐藏"><a href="#显示与隐藏" class="headerlink" title="显示与隐藏"></a>显示与隐藏</h2><ul>
<li>visibility:hidden隐藏元素(会保留原先的位置) visible显示元素</li>
<li>display:none 隐藏元素(不会保留原先的位置) block除了转换为块级元素的作用，还有显示元素的作用</li>
</ul>
<h2 id="精灵图-雪碧图技术"><a href="#精灵图-雪碧图技术" class="headerlink" title="精灵图/雪碧图技术"></a>精灵图/雪碧图技术</h2><ol>
<li>目的：多张小背景图片放到一张大图上，减少服务器的接收和发送请求次数，提高加载速度。</li>
<li>使用：精灵图主要针对的是背景图片的使用，借助background-position。来确定每张小背景图片的位置。</li>
<li>精灵图的位置：x轴正(右)半轴，y轴负(下)半轴表示的位置都是负值</li>
<li>可以利用FW PS等一些运用测量具体的位置</li>
<li>缺点：1. 图片放大或缩小会失真 2. 图片文件比较大 3. 一旦美工完之后更换非常复杂</li>
</ol>
<h2 id="字体图标iconfont"><a href="#字体图标iconfont" class="headerlink" title="字体图标iconfont"></a>字体图标iconfont</h2><p>展示的是图标实质上是文字，解决精灵图带来的问题。但是只能是一些简单结构的图标，复杂的还是只能通过精灵图来做。</p>
<ul>
<li>字体图标地址：</li>
<li><ul>
<li>icomoon：<a href="https://icomoon.io">https://icomoon.io</a></li>
</ul>
</li>
<li><ul>
<li>Iconfont-阿里巴巴矢量图标库：<a href="https://www.iconfont.cn">https://www.iconfont.cn</a></li>
</ul>
</li>
<li>icomoon使用教程：<a href="http://codehouse9.gitee.io/blog/6ee.html">http://codehouse9.gitee.io/blog/6ee.html</a></li>
</ul>
<h2 id="css三角形制作"><a href="#css三角形制作" class="headerlink" title="css三角形制作"></a>css三角形制作</h2><pre class="line-numbers language-highlight css"><span class="selector-tag"><code class="language-highlight css"><span class="selector-tag">span</span>{
 <span class="attribute">width</span>:<span class="number">0</span>;
 <span class="attribute">height</span>:<span class="number">0</span>;
 <span class="attribute">border</span>:<span class="number">8px</span> solid transparent; <span class="comment">/*8像素的透明色*/</span>
 <span class="attribute">border-top-color</span>:pink; <span class="comment">/* 需要显示的边给个颜色*/</span>
 <span class="attribute">line-height</span>:<span class="number">0</span>;
 <span class="attribute">font-size</span>:<span class="number">0</span>;  <span class="comment">/*后面这两句代码是为了解决兼容性问题,最好写上*/</span>
}<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="取消表单轮廓和防止拖拽文本域"><a href="#取消表单轮廓和防止拖拽文本域" class="headerlink" title="取消表单轮廓和防止拖拽文本域"></a>取消表单轮廓和防止拖拽文本域</h2><pre class="line-numbers language-highlight css"><span class="selector-tag">input</span>, <span class="selector-tag"><code class="language-highlight css"><span class="selector-tag">input</span>, <span class="selector-tag">textarea</span>{
	<span class="attribute">outline</span>: none;<span class="comment">/* 清除默认的轮廓 */</span>
}
<span class="selector-tag">textarea</span>{
	<span class="attribute">resize</span>: none;<span class="comment">/* 防止拖拽文本域，避免影响其他的布局 */</span>
}<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h2 id="文字溢出省略号显示"><a href="#文字溢出省略号显示" class="headerlink" title="文字溢出省略号显示"></a>文字溢出省略号显示</h2><ol>
<li>单行文字溢出：<pre class="line-numbers language-highlight css"><span class="selector-tag"><code class="language-highlight css"><span class="selector-tag">div</span>{
	<span class="attribute">white-space</span>:nowrap; <span class="comment">/* 让文字单行显示，nowrap不换行*/</span>
	<span class="attribute">overflow</span>:hidden; <span class="comment">/* 让超出的部分隐藏*/</span>
	<span class="attribute">text-overflow</span>:ellipsis; <span class="comment">/* 让溢出的文字用省略号显示*/</span>
}<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></li>
<li>多行文字溢出-有较大的兼容性问题，适合webKit浏览器内核<pre class="line-numbers language-highlight css"><span class="selector-tag"><code class="language-highlight css"><span class="selector-tag">div</span>{
	<span class="attribute">overflow</span>:hidden;
	<span class="attribute">text-overflow</span>:hidden;
	<span class="attribute">display</span>: -webkit-box; <span class="comment">/* 转化为弹性盒子模型显示*/</span>
	<span class="attribute">-webkit-line-clamp</span>:<span class="number">2</span>; <span class="comment">/* 在快级盒子显示的文本行数*/</span>
	<span class="attribute">-webkit-box-orient</span>: vertical; <span class="comment">/* 子元素的排列方式*/</span>
}<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
设置好之后，把多余的高度减去即可</li>
</ol>
<h2 id="vertical-align属性运用"><a href="#vertical-align属性运用" class="headerlink" title="vertical-align属性运用"></a>vertical-align属性运用</h2><ul>
<li>运用场景：经常用于设置图片或者表单元素和文字的垂直对齐，但是它只针对<code>行内元素</code>和<code>行内块状元素</code></li>
<li><ul>
<li>vertical-align: baseline 默认基线对齐 文字会在图片或者表格的下面一点点</li>
</ul>
</li>
<li><ul>
<li>vertical-align: bottom 文字与图片或者表格的底部对齐</li>
</ul>
</li>
<li><ul>
<li>vertical-align: middle 文字与图片或者表格的中间对齐</li>
</ul>
</li>
<li><ul>
<li>vertical-align: top 文字与图片或者表格的顶部对齐</li>
</ul>
</li>
<li>解决图片底部的空白问题</li>
<li><ul>
<li>原因：就是默认的对齐方式是基于基线对齐，底部就会有一片空白区域</li>
</ul>
</li>
<li><ul>
<li><ul>
<li>解决方法1：就是设置 vertical-align:bottom|top|middle就可以了，只要不是默认的vertical-align:baseline就行</li>
</ul>
</li>
</ul>
</li>
<li><ul>
<li><ul>
<li>解决方法二：设置为块状元素 display:block 就可以，但是不推荐，有很大的局限性</li>
</ul>
</li>
</ul>
</li>
</ul>
<h2 id="属性的巧妙运用"><a href="#属性的巧妙运用" class="headerlink" title="属性的巧妙运用"></a>属性的巧妙运用</h2><h3 id="margin的巧用"><a href="#margin的巧用" class="headerlink" title="margin的巧用"></a>margin的巧用</h3><p>描述：当ul里面有5个小li都设置有边框的情况下，边框就会叠加</p>
<p><strong>解决方法：</strong>border-collapse: collapse;(是没有效果的) 这里需要巧妙的运用页面的渲染机制及margin-left的使用，第一个li浮动并且设置了margin-left:-xxpx之后到第二个li的时候，会浮动靠到第一个li上，再渲染margin-left: -xxpx; 那么就可以把第一个li的右侧边框给盖住。</p>
<p><strong>新问题：</strong> 会把其他盒子的边框给压住设置hover显示换边框颜色的时候更明显</p>
<p><strong>解决方法：</strong></p>
<ol>
<li>如果盒子没有设置定位属性的话，则给当前盒子设置相对定位(会保留原先的位置并且盖住其他的盒子)即可</li>
<li>如果盒子设置了定位属性，则可以通过设置当前盒子的层级z-index高于其他盒子即可,默认是auto。</li>
</ol>
<h3 id="浮动的巧用"><a href="#浮动的巧用" class="headerlink" title="浮动的巧用"></a>浮动的巧用</h3><p>描述：一个盒子里面放着左右两个盒子，左边的盒子有一张图片，右边的盒子里面是文字</p>
<p>构思：由于我们的浮动是不会压住文字的(文字环绕效果)，当我们给有图片的盒子设置了浮动之后，右边盒子的内容就会浮动到左边盒子的右侧，就可以不用再给右边盒子设置浮动效果了。</p>
<h3 id="行内块状元素的巧用"><a href="#行内块状元素的巧用" class="headerlink" title="行内块状元素的巧用"></a>行内块状元素的巧用</h3><p>描述：我们在一些网站上经常看得到页码(上一页下一页，第几… 跳转至…页)这个东西，我们就可以用行内块状元素来做，比较简单(浮动价比较麻烦)</p>
<p>构思:行内块状元素既可以设置宽高又可以在一行上显示，并且行内块状元素之间会有默认的空隙，不需要再设置margin值</p>
<h3 id="border巧用"><a href="#border巧用" class="headerlink" title="border巧用"></a>border巧用</h3><p>描述：利用border属性制作 直角三角形，有些页面如京东是有哪些斜杠的</p>
<p>制作：</p>
<pre class="line-numbers language-highlight css"><span class="selector-tag"><code class="language-highlight css"><span class="selector-tag">div</span> {
	<span class="attribute">width</span>: <span class="number">0</span>;
	<span class="attribute">height</span>: <span class="number">0</span>;
	<span class="attribute">font-size</span>: <span class="number">0</span>;
	<span class="attribute">line-height</span>: <span class="number">0</span>;
	<span class="attribute">border-top</span>: <span class="number">100px</span> solid transparent;<span class="comment">/* 撑大为直角 */</span>
	<span class="attribute">border-right</span>: <span class="number">50px</span> solid pink;
}<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>原理：就是制作一个直角三角形 然后用定位属性定位到合适位置即可</p>
<h2 id="css初始化-css-reset"><a href="#css初始化-css-reset" class="headerlink" title="css初始化/css reset"></a>css初始化/css reset</h2><p>描述: 不同的浏览器对有些标签的默认值是不同的，为了消除不同浏览器对HTML文本呈现的差异，解决浏览器之间的兼容性问题，以及更好的布局和减少css的代码量，我们需要对css进行初始化操作。拿京东css初始化为例:</p>
<pre class="line-numbers language-highlight css"><code class="language-highlight css">* {
	<span class="attribute">padding</span>: <span class="number">0</span>;
	<span class="attribute">margin</span>: <span class="number">0</span>;
}
<span class="selector-tag">em</span>, <span class="selector-tag">i</span> {
	<span class="attribute">font-style</span>: normal;
}
<span class="selector-tag">li</span> {
	<span class="attribute">list-style</span>: none;
}
<span class="selector-tag">img</span> {
	<span class="attribute">border</span>: <span class="number">0</span>; <span class="comment">/* 兼容低版本浏览器，图片外面包含链接会有边框问题*/</span>
	<span class="attribute">vertical-align</span>: middle; <span class="comment">/* 消除图片底部的空白*/</span>
}
<span class="selector-tag">button</span> {
	<span class="attribute">cursor</span>: pointer;
}
<span class="selector-tag">a</span> {
	<span class="attribute">color</span>: <span class="number">#666</span>;
	<span class="attribute">text-decoration</span>: none;
}
<span class="selector-tag">a</span><span class="selector-pseudo">:hover</span> {
	<span class="attribute">color</span>: <span class="number">#c81623</span>;
}
<span class="selector-tag">button</span>, <span class="selector-tag">input</span> {
	<span class="attribute">font-family</span>: Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, <span class="string">'\5B88\4F53'</span>;
}
<span class="selector-tag">body</span> {
	<span class="attribute">-webkit-font-smoothing</span>: antialiased; <span class="comment">/* 文字放大之后，不要有锯齿*/</span>
	<span class="attribute">font</span>: <span class="number">12px</span>/<span class="number">1.5</span> Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB, <span class="string">"\5B88\4F53"</span>;
	<span class="attribute">color</span>: <span class="number">#666</span>;
}
<span class="selector-class">.hide</span>, <span class="selector-class">.none</span> {
	<span class="attribute">display</span>: none;
}
<span class="selector-class">.clearfix</span><span class="selector-pseudo">:after</span> { <span class="comment">/* 解决子元素设置浮动父盒子没有设置高度导致的布局错乱问题*/</span>
	<span class="attribute">content</span>: <span class="string">""</span>;
	<span class="attribute">display</span>: block;
	<span class="attribute">clear</span>: both;
	<span class="attribute">height</span>: <span class="number">0</span>;
	<span class="attribute">visibility</span>: visible;
}
<span class="selector-class">.clearfix</span> {
	*zoom: 1;/* 兼容低版本浏览器 */
}<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>注：中文字体有可能在css解释的时候出现乱码的问题，最好是用相应的Unicode编码来代替，常用的字体：</p>
<ul>
<li>黑体 \9ED1\4F53</li>
<li>宋体 \5B88\4F53</li>
<li>微软雅黑 \5FAE\8F6F\96C5\9ED1</li>
</ul>
<h2 id="HTML5新特性"><a href="#HTML5新特性" class="headerlink" title="HTML5新特性"></a>HTML5新特性</h2><h3 id="新增的语义化标签"><a href="#新增的语义化标签" class="headerlink" title="新增的语义化标签"></a>新增的语义化标签</h3><ul>
<li>header: 头部标签</li>
<li>nav: 导航标签</li>
<li>article: 内容标签</li>
<li>section: 定义文本某个区域</li>
<li>aside 侧边栏标签</li>
<li>footer: 尾部标签</li>
</ul>
<p>注意：这种语义标签主要是针对搜索引擎的，在IE9中要转化为块级元素</p>
<h3 id="多媒体标签"><a href="#多媒体标签" class="headerlink" title="多媒体标签"></a>多媒体标签</h3><ol>
<li>视频： video<pre class="line-numbers language-highlight html"><span class="tag">&lt;<span class="name">video</span> <span class="attr">src</span>=<span class="string">"mi.mp4"</span><span class="attr">autoplay</span>=<span class="string">"autoplay"</span> <span class="attr">muted</span>=<span class="string">"muted"</span> <span class="attr">controls</span>=<span class="string">"controls"</span> <span class="attr">loop</span>=<span class="string">"loop"</span> <span class="attr">poster</span>=<span class="string">"mi9.jpg"</span>&gt;</span><span class="tag">&lt;/<span class="name"><code class="language-highlight html"><span class="tag">&lt;<span class="name">video</span> <span class="attr">src</span>=<span class="string">"mi.mp4"</span><span class="attr">autoplay</span>=<span class="string">"autoplay"</span> <span class="attr">muted</span>=<span class="string">"muted"</span> <span class="attr">controls</span>=<span class="string">"controls"</span> <span class="attr">loop</span>=<span class="string">"loop"</span> <span class="attr">poster</span>=<span class="string">"mi9.jpg"</span>&gt;</span><span class="tag">&lt;/<span class="name">video</span>></span>
/* muted谷歌浏览器禁用了自动播放的功能，设置这个静音属性就可自动播放
poster当网速加载慢开始时显示的图片
preload:auto预加载视频，如果有autoplay则忽略该属性
这个video标签有局限性最好是mp4格式 */<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<pre class="line-numbers language-highlight html"><code class="language-highlight html">/* 考虑兼容性的问题 */
<span class="tag"><<span class="name">video</span> <span class="attr">width</span>=<span class="string">"320px"</span> <span class="attr">heigth</span>=<span class="string">"240px"</span> <span class="attr">controls</span>></span>
	<span class="tag"><<span class="name">source</span> <span class="attr">src</span>=<span class="string">"mi.mp4"</span> <span class="attr">type</span>=<span class="string">"video/mp4"</span>></span>
	<span class="tag"><<span class="name">source</span> <span class="attr">src</span>=<span class="string">"mi.ogg"</span> <span class="attr">type</span>=<span class="string">"video/ogg"</span>></span>
<span class="tag"></<span class="name">video</span>></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre></li>
<li>音频: audio<pre class="line-numbers language-highlight html"><span class="tag">&lt;<span class="name">audio</span> <span class="attr">src</span>=<span class="string">"music.mp3"</span> <span class="attr">autoplay</span>=<span class="string">"autoplay"</span> <span class="attr">controls</span>&gt;</span><span class="tag">&lt;/<span class="name"><code class="language-highlight html"><span class="tag">&lt;<span class="name">audio</span> <span class="attr">src</span>=<span class="string">"music.mp3"</span> <span class="attr">autoplay</span>=<span class="string">"autoplay"</span> <span class="attr">controls</span>&gt;</span><span class="tag">&lt;/<span class="name">audio</span>></span>
/* 谷歌也不能自动播放，js可解决 */<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>

</li>
</ol>
<h3 id="新增input类型"><a href="#新增input类型" class="headerlink" title="新增input类型"></a>新增input类型</h3><pre class="line-numbers language-highlight html"><span class="comment"><code class="language-highlight html"><span class="comment"><!-- 必须要添加到表单域里面才有验证提示的效果 --></span>
<span class="tag"><<span class="name">form</span> <span class="attr">action</span>=<span class="string">""</span> <span class="attr">method</span>=<span class="string">"get"</span>></span>
	<span class="tag"><<span class="name">ul</span>></span>
		<span class="tag"><<span class="name">li</span>></span>邮箱：<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"email"</span>></span><span class="tag"></<span class="name">li</span>></span>
		<span class="tag"><<span class="name">li</span>></span>网址：<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"url"</span>></span><span class="tag"></<span class="name">li</span>></span>
		<span class="tag"><<span class="name">li</span>></span>日期：<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"date"</span>></span><span class="tag"></<span class="name">li</span>></span><span class="comment"><!-- 年 月 日 --></span>
		<span class="tag"><<span class="name">li</span>></span>时间：<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"time"</span>></span><span class="tag"></<span class="name">li</span>></span><span class="comment"><!-- 小时 分钟 --></span>
		<span class="tag"><<span class="name">li</span>></span>数量：<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"number"</span>></span><span class="tag"></<span class="name">li</span>></span>
		<span class="tag"><<span class="name">li</span>></span>手机号：<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"tel"</span>></span><span class="tag"></<span class="name">li</span>></span>
		<span class="tag"><<span class="name">li</span>></span>搜索：<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"search"</span>></span><span class="tag"></<span class="name">li</span>></span>
		<span class="tag"><<span class="name">li</span>></span>颜色：<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"color"</span>></span><span class="tag"></<span class="name">li</span>></span>
		<span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span> <span class="attr">value</span>=<span class="string">"提交"</span>/></span><span class="tag"></<span class="name">li</span>></span>
	<span class="tag"></<span class="name">ul</span>></span>
<span class="tag"></<span class="name">form</span>></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="新增的表单属性"><a href="#新增的表单属性" class="headerlink" title="新增的表单属性"></a>新增的表单属性</h3><ul>
<li>required=”require” : 必填，内容不为空</li>
<li>placeholder=”提示文本” 提示信息，存在默认值将不显示。 input::placeholder{color=”#ccc”; font-size: 12px;}伪类可修改css属性</li>
<li>autofocus=”autofocus” 自动获取光标</li>
<li>autocomplete=”on” 获取光标时提示历史记录信息，需要设置name属性标识并成功提交过。默认为on打开，但是为了安全性问题，建议关闭off</li>
<li>multiple=”multiple” 可以为type=”file”提交多个文件<pre class="line-numbers language-highlight css"><code class="language-highlight css"><style type="text/css">
	<span class="selector-tag">input</span><span class="selector-pseudo">::placeholder</span>{
		<span class="attribute">color</span>: pink;
		<span class="attribute">font-size</span>: <span class="number">12px</span>;
	}
</style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<pre class="line-numbers language-highlight html"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">""</span> <span class="attr">method</span>=<span class="string"><code class="language-highlight html"><span class="tag">&lt;<span class="name">form</span> <span class="attr">action</span>=<span class="string">""</span> <span class="attr">method</span>=<span class="string">"post"</span>></span>
	<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"email"</span> <span class="attr">name</span>=<span class="string">"email"</span> <span class="attr">required</span>=<span class="string">"required"</span> <span class="attr">placeholder</span>=<span class="string">"邮箱地址"</span> <span class="attr">autofocus</span>=<span class="string">"autofocus"</span> <span class="attr">autocomplete</span>=<span class="string">"off"</span> /></span>
	<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"file"</span> <span class="attr">multiple</span>=<span class="string">"multiple"</span> /></span>
	<span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"submit"</span> <span class="attr">value</span>=<span class="string">"提交"</span> /></span>
<span class="tag"></<span class="name">form</span>></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>

</li>
</ul>
<h2 id="css3新特性"><a href="#css3新特性" class="headerlink" title="css3新特性"></a>css3新特性</h2><h3 id="属性选择器"><a href="#属性选择器" class="headerlink" title="属性选择器"></a>属性选择器</h3><p>通过特定的属性来选择元素</p>
<p>方式：</p>
<ol>
<li>元素[属性] input[value]</li>
<li>元素[属性=属性值] input[type=submit]</li>
<li>元素[属性^=属性值] 以该属性值开头 div[class^=ico]</li>
<li>元素[属性$=属性值] 以该属性值结尾 div[class$=data]</li>
<li>元素[属性*=属性值] 以该属性值开头和结尾 div[class*=ico]</li>
</ol>
<p>注意：类 伪类 属性选择器权重都是10  div[class^=icon] 权重： div 1 + 属性选择器 10 = 11</p>
<h3 id="结构伪类选择器"><a href="#结构伪类选择器" class="headerlink" title="结构伪类选择器"></a>结构伪类选择器</h3><p>通过文档结构来选择元素，常用于查找子元素</p>
<ol>
<li>first-child 第一个孩子  ul li:first-child</li>
<li>last-child 最后一个孩子  ul li:last-child</li>
<li><code>nth-child(n)</code> n可以是</li>
</ol>
<p><strong>数字</strong>：从1开始,选择几表示第几个孩子 nth-child(3); 选择第三个孩子</p>
<p><strong>关键字:</strong> nth-child(even) 选择所有偶数的孩子 ul li:nth-child(even); nth-child(odd)奇数</p>
<p><strong>表达式:</strong> n 表示从0开始 nth-child(n) 表示从第0个开始到到最后一个孩子；nth-child(2n)偶数；<br>nth-child(2n+1)奇数; nth-child(5n)选择5的倍数； nth-child(n+3) 选择第三个孩子后面的孩子；<br>nth-child(-n+3) 选择前面的三个孩子， -0+3=3 -1+3=2 -2+3= 1 -3+3=0——没有了结束。</p>
<ol start="4">
<li>first-of-type: 指定类型的第一个</li>
<li>last-of-type: 指定类型的最后一个</li>
<li>nth-of-type: 指定类型的第n个 这后面三个跟上面三个是很相似的，不同点在于是否先区分类型上</li>
</ol>
<p><strong>执行机制的区别：</strong> <code>nth-chid(n)</code> 执行机制是：先把孩子进行排序找到编号的孩子看他的标签(元素)是否跟前面的元素匹配，如果不匹配，则忽视。如： section p:nth-child(1)先排序，找到第一个孩子，跟p元素进行匹配，不匹配则忽视。权重12。  <code>nth-of-type(n)</code> 执行机制：先找到指定类型的元素再给他们排序,如：section p:nth-of-type(1)先找到所有的p标签并给他们编号，找到所需编号的孩子,OK。</p>
<h2 id="before-after伪元素选择器"><a href="#before-after伪元素选择器" class="headerlink" title="before after伪元素选择器"></a>before after伪元素选择器</h2><p><strong>注：</strong></p>
<ol>
<li>before after 伪类选择器可以简化文档树的结构</li>
<li>div::before{content=””} 插入的是div里面的最前面，作为div的一个孩子</li>
<li>div::after{content=””} 插入到div里面的最后面，也是作为div的一个孩子</li>
<li>必须有content属性，才会生效</li>
<li>插入后的是行内元素</li>
<li>权重只有 1 </li>
</ol>
<p><strong>运用场景</strong></p>
<ol>
<li>伪元素设置字体图标<pre class="line-numbers language-highlight css"><span class="selector-tag"><code class="language-highlight css"><span class="selector-tag">p</span> {
	<span class="attribute">position</span>: relative;
	<span class="attribute">width</span>: <span class="number">200px</span>;
	<span class="attribute">height</span>: <span class="number">30px</span>;
	<span class="attribute">border</span>: <span class="number">1px</span> solid red;
}
<span class="selector-tag">p</span><span class="selector-pseudo">::after</span> {
	<span class="attribute">content</span>: <span class="string">""</span>;
	<span class="attribute">position</span>: absolute;
	<span class="attribute">right</span>: <span class="number">10px</span>;
	<span class="attribute">top</span>: <span class="number">8px</span>;
	<span class="attribute">color</span>: pink;
	<span class="attribute">font-family</span>: <span class="string">'icomoon'</span>;
	<span class="attribute">font-size</span>: <span class="number">16px</span>;
}
<span class="comment">/* 效果就不展示了，还要上传图床，懒。。。 */</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li>
<li>设置遮罩层<pre class="line-numbers language-highlight css"><span class="selector-tag"><code class="language-highlight css"><span class="selector-tag">div</span>{
	<span class="attribute">postion</span>: relative;
	<span class="comment">/* 其他布局代码已省略 */</span>
}
<span class="selector-tag">div</span><span class="selector-pseudo">::after</span> {
	<span class="attribute">content</span>: <span class="string">""</span>;
	<span class="attribute">postion</span>: absolute;
	<span class="attribute">width</span>: <span class="number">100%</span>;
	<span class="attribute">height</span>: <span class="number">100%</span>;
	<span class="attribute">background</span>: <span class="built_in">rgb</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>,.<span class="number">3</span>) <span class="built_in">url</span>(mask.png) no-repeat center;
}<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li>
<li>清除浮动<pre class="line-numbers language-highlight css"><span class="comment"><code class="language-highlight css"><span class="comment">/* 清除浮动的两种伪类方法上面已经说过了 */</span>
<span class="selector-class">.clearfix</span><span class="selector-pseudo">::after</span> {
	<span class="attribute">content</span>: <span class="string">''</span>; <span class="comment">/* 必须加的属性*/</span>
	<span class="attribute">display</span>: block; <span class="comment">/* 清除浮动的最后面的一个盒子必须是块状元素*/</span>
	<span class="attribute">height</span>: <span class="number">0</span>;
	<span class="attribute">visibility</span>: hidden; <span class="comment">/* 把这个盒子隐藏起来，不要看见*/</span>
	<span class="attribute">clear</span>: both; <span class="comment">/* 清除浮动*/</span>
}
<span class="selector-class">.clearfix</span> {
	*zoom : 1;
}
<span class="comment">/* 第二种方式 */</span>
<span class="selector-class">.clearfix</span><span class="selector-pseudo">::after</span>, <span class="selector-class">.clearfix</span><span class="selector-pseudo">::before</span> {
	<span class="attribute">content</span>: <span class="string">''</span>;
	<span class="attribute">display</span>: table; <span class="comment">/* 把内容前后围起来*/</span>
}
<span class="selector-class">.clearfix</span><span class="selector-pseudo">::after</span> {
	<span class="attribute">clear</span>: both;
}
<span class="selector-class">.clearfix</span><span class="selector-pseudo">::before</span> {
	*zoom: 1;
}<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

</li>
</ol>
<h2 id="css3其他特性"><a href="#css3其他特性" class="headerlink" title="css3其他特性"></a>css3其他特性</h2><h3 id="css3滤镜filter"><a href="#css3滤镜filter" class="headerlink" title="css3滤镜filter"></a>css3滤镜filter</h3><p>filter使图片变得模糊或者颜色偏移等图形效果。</p>
<p>使用： filter：函数(); 如：filter: blur(10px) blur模糊处理，数值越大越模糊。</p>
<h3 id="calc函数"><a href="#calc函数" class="headerlink" title="calc函数"></a>calc函数</h3><p>calc函数用于计算宽高等具有长度的属性，如： height: calc(100% - 30px); 可以是 + - * \ 四则运算。运算符的左右都要有空格隔开。</p>
<h2 id="transform-2d变形"><a href="#transform-2d变形" class="headerlink" title="transform 2d变形"></a>transform 2d变形</h2><h3 id="translate-2d移动"><a href="#translate-2d移动" class="headerlink" title="translate 2d移动"></a>translate 2d移动</h3><p>可以改变元素在页面中的位置，类似于<strong><code>定位</code></strong></p>
<pre class="line-numbers language-highlight css"><span class="selector-tag"><code class="language-highlight css"><span class="selector-tag">div</span>{
	<span class="attribute">transform</span>: <span class="built_in">translate</span>(x,y);
	<span class="attribute">transform</span>: <span class="built_in">translateX</span>(n);
	<span class="attribute">transform</span>:<span class="built_in">translateY</span>(n);
}<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p><strong>重点：</strong></p>
<ul>
<li>移动方向是X轴和Y轴，反方向是负的</li>
<li>单位除了 px外还可以是百分比，表示自身的百分之多少 translate:(50%, 50%); 自身宽高的一半</li>
<li>最大的优点：不会影响到其他的元素的位置(保留原先的位置)</li>
<li>对行内元素是没有效果的。</li>
</ul>
<p>运用1：可以用于让盒子居中对齐</p>
<p>分析：使用margin 或者  postion和margin-left,margin-right 设置的居中对齐都不是相对而变化的。我们可以使用 postion + translate 来设置相对居中</p>
<pre class="line-numbers language-highlight css"><code class="language-highlight css"><style type="text/css">
	<span class="selector-tag">div</span>{
		<span class="attribute">position</span>: relative;
		<span class="attribute">width</span>: <span class="number">580px</span>;
		<span class="attribute">height</span>: <span class="number">580px</span>;
		<span class="attribute">background-color</span>: pink;
	}
	<span class="selector-tag">div</span> > <span class="selector-tag">p</span>{
		<span class="attribute">position</span>: absolute;
		<span class="attribute">left</span>: <span class="number">50%</span>;
		<span class="attribute">top</span>: <span class="number">50%</span>;
		<span class="attribute">transform</span>: <span class="built_in">translate</span>(-<span class="number">50%</span>, -<span class="number">50%</span>);
		<span class="attribute">width</span>: <span class="number">200px</span>;
		<span class="attribute">height</span>: <span class="number">200px</span>;
		<span class="attribute">background-color</span>: purple;
	}
</style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>运用2：利用移动不会影响其他盒子的位置，我们可以设置鼠标移入图片让图片升高5px而不影响下面的内容</p>
<pre class="line-numbers language-highlight css"><span class="selector-tag">div</span> &gt; <span class="selector-tag"><code class="language-highlight css"><span class="selector-tag">div</span> &gt; <span class="selector-tag">img</span> {
	<span class="attribute">transition</span>: all <span class="number">0.3s</span>;
}
<span class="selector-tag">div</span> > <span class="selector-tag">img</span><span class="selector-pseudo">:hover</span>{
	<span class="attribute">transform</span>: <span class="built_in">translateY</span>(-<span class="number">5px</span>);
}<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="rotate-2d旋转"><a href="#rotate-2d旋转" class="headerlink" title="rotate 2d旋转"></a>rotate 2d旋转</h2><h3 id="旋转中心点-transform-origin"><a href="#旋转中心点-transform-origin" class="headerlink" title="旋转中心点 transform-origin"></a>旋转中心点 transform-origin</h3><ul>
<li>默认的旋转中心点事transform-origin:(50%, 50%); 自身的中心点</li>
<li>可以设置的单位有：百分比 方位名词transform-origin: left bottom; 具体的位置-像素 transform-origin:50px 50px;</li>
</ul>
<h3 id="旋转案例"><a href="#旋转案例" class="headerlink" title="旋转案例"></a>旋转案例</h3><pre class="line-numbers language-highlight css"><code class="language-highlight css"><style type="text/css">
	<span class="selector-tag">div</span> {
		<span class="attribute">overflow</span>: hidden;
		<span class="attribute">position</span>: relative;
		<span class="attribute">width</span>: <span class="number">200px</span>;
		<span class="attribute">height</span>: <span class="number">200px</span>;
		<span class="attribute">border</span>: <span class="number">1px</span> solid pink;
		<span class="attribute">margin</span>: <span class="number">100px</span> auto;
	}
	<span class="selector-tag">div</span><span class="selector-pseudo">::after</span> {
		<span class="attribute">content</span>: <span class="string">"涟漪"</span>;
		<span class="attribute">display</span>: block;
		<span class="attribute">width</span>: <span class="number">100%</span>;
		<span class="attribute">height</span>: <span class="number">100%</span>;
		<span class="attribute">background</span>: <span class="built_in">url</span>(<span class="number">1</span>.jpg) no-repeat center/<span class="number">200px</span>;
		<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">180deg</span>);
		<span class="attribute">transform-origin</span>: left bottom;
		<span class="attribute">transition</span>: all <span class="number">0.6s</span>;
	}
	<span class="selector-tag">div</span><span class="selector-pseudo">:hover</span><span class="selector-pseudo">::after</span> {
		<span class="attribute">transform</span>: <span class="built_in">rotate</span>(<span class="number">0deg</span>);
	}
</style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h2 id="2d缩放-scale"><a href="#2d缩放-scale" class="headerlink" title="2d缩放 scale"></a>2d缩放 scale</h2><h3 id="注意点"><a href="#注意点" class="headerlink" title="注意点:"></a>注意点:</h3><ul>
<li>transform: scale(x,y) 没有单位，就是纯数字，表示放大或者缩小几倍</li>
<li>transform: scale(n) 一个值得时候，表示了 x 和 y轴的缩放</li>
<li>和传统的设置宽高进行缩放相比，最大的优点在于，不会影响到其他盒子，貌似变形属性都不会。</li>
</ul>
<h3 id="运用"><a href="#运用" class="headerlink" title="运用"></a>运用</h3><p>缩放图片</p>
<pre class="line-numbers language-highlight css"><code class="language-highlight css"><style type="text/css">
	*{
		<span class="attribute">padding</span>: <span class="number">0</span>;
		<span class="attribute">margin</span>: <span class="number">0</span>;
	}
	<span class="selector-tag">ul</span> <span class="selector-tag">li</span> {
		<span class="attribute">float</span>: left;
		<span class="attribute">overflow</span>: hidden;
		<span class="attribute">margin</span>: <span class="number">10px</span>;
		<span class="attribute">width</span>: <span class="number">200px</span>;
		<span class="attribute">list-style</span>: none;
	}
	<span class="selector-tag">ul</span> <span class="selector-tag">img</span> {
		<span class="attribute">width</span>: <span class="number">100%</span>;
		<span class="attribute">transition</span>: all .<span class="number">4s</span>;
	}
	<span class="selector-tag">ul</span> <span class="selector-tag">img</span><span class="selector-pseudo">:hover</span> {
		<span class="attribute">transform</span>: <span class="built_in">scale</span>(<span class="number">1.1</span>);
	}
</style><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<h3 id="效果图"><a href="#效果图" class="headerlink" title="效果图"></a>效果图</h3><p>链接：<a href="http://codehouse9.gitee.io/picturezoom">http://codehouse9.gitee.io/picturezoom</a></p>
<h2 id="综合写法"><a href="#综合写法" class="headerlink" title="综合写法"></a>综合写法</h2><p>transform: translate() rotate() scale()…<br>注意：</p>
<ol>
<li>书写顺序没有固定，但是会影响效果</li>
<li>多个属性之间用空格隔开</li>
<li>当我们同时有位移和其他属性时，把位移放到最前面是最好的(先旋转会改变坐标轴的方向,先缩放会影响移动的距离)</li>
</ol>
<h2 id="animation-动画"><a href="#animation-动画" class="headerlink" title="animation 动画"></a>animation 动画</h2><p>与过渡的区别：过渡只能是鼠标经过，或者就一开始有个效果，就没了，功能单一。而动画则可以自动的运转，连续的播放，更过的控制，实现更过的变化。多用来实现复杂的效果。根据不同的需求选择过渡还是动画效果。</p>
<h3 id="动画的使用"><a href="#动画的使用" class="headerlink" title="动画的使用"></a>动画的使用</h3><ol>
<li>先定义<pre class="line-numbers language-highlight css"><span class="keyword">@keyframes</span> move { <span class="comment"><code class="language-highlight css"><span class="keyword">@keyframes</span> move { <span class="comment">/* 动画名字,随起*/</span>
	<span class="selector-tag">from</span>{ <span class="comment">/* 对应 0% */</span>
		<span class="comment">/* css样式 */</span>
	}
	<span class="selector-tag">to</span>{ <span class="comment">/* 对应 100% */</span>
		<span class="comment">/* css样式 */</span>
	}
}<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre></li>
<li>再使用<pre class="line-numbers language-highlight css"><span class="selector-tag">animation</span>: <span class="selector-tag">move</span> 2<span class="selector-tag"><code class="language-highlight css"><span class="selector-tag">animation</span>: <span class="selector-tag">move</span> 2<span class="selector-tag">s</span> ...;<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

</li>
</ol>
<h3 id="动画属性"><a href="#动画属性" class="headerlink" title="动画属性"></a>动画属性</h3><ol>
<li>@keyframs: 规定动画</li>
<li>animation-name: 动画名称</li>
<li>animation-duration: 动画持续时间</li>
<li>animation-timing-function 动画运动曲线</li>
<li>animation-delay 动画延迟时间</li>
<li>animation-iteration-count 循环次数 infinite无线循环</li>
<li>animation-direction  是否逆向播放：默认normal 逆向 alternate</li>
<li>animation-play-state 规定动画是否正在运行或者暂停 默认running 还有paused 鼠标经过暂停</li>
<li>animation-fill-mode 规定动画结束后的状态 默认backwards 保持原地点 forworads</li>
<li>animation 所有动画的简写，必须包含动画名字和动画持续时间，才有效</li>
</ol>
<h3 id="案例-波浪扩散"><a href="#案例-波浪扩散" class="headerlink" title="案例-波浪扩散"></a>案例-波浪扩散</h3><pre class="line-numbers language-highlight html"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword"><code class="language-highlight html"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>></span>
<span class="tag"><<span class="name">html</span>></span>
	<span class="tag"><<span class="name">head</span>></span>
		<span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>></span>
		<span class="tag"><<span class="name">title</span>></span>波浪扩散-热点提示<span class="tag"></<span class="name">title</span>></span>
		<span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span>
<span class="css">			<span class="selector-class">.city</span> {</span>
				position: relative;
				width: 8px;
				height: 8px;
				margin: 100px auto;
			}
<span class="css">			<span class="selector-class">.city</span> <span class="selector-class">.dotted</span> {</span>
				position: absolute;
				width: 100%;
				height: 100%;
				border-radius: 50%;
<span class="css">				<span class="selector-tag">background-color</span>: <span class="selector-id">#09f</span>;</span>
<span class="css">				<span class="selector-tag">opacity</span>: 0<span class="selector-class">.8</span>;</span>
			}
			
<span class="css">			<span class="selector-class">.city</span> <span class="selector-tag">div</span><span class="selector-attr">[class^=pulse]</span> {</span>
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				width: 100%;
				height: 100%;
<span class="css">				<span class="selector-tag">box-shadow</span>: 0 0 12<span class="selector-tag">px</span> <span class="selector-id">#009dfd</span>;</span>
				border-radius: 50%;
<span class="css">				<span class="selector-tag">animation</span>: <span class="selector-tag">pulse</span> 1<span class="selector-class">.2s</span> <span class="selector-tag">linear</span> <span class="selector-tag">infinite</span>;</span>
			}
<span class="css">			<span class="selector-class">.city</span> <span class="selector-tag">div</span><span class="selector-class">.pulse2</span> {</span>
<span class="css">				<span class="selector-tag">animation-delay</span>: 0<span class="selector-class">.4s</span>;</span>
			}
<span class="css">			<span class="selector-class">.city</span> <span class="selector-tag">div</span><span class="selector-class">.pulse3</span> {</span>
<span class="css">				<span class="selector-tag">animation-delay</span>: 0<span class="selector-class">.8s</span>;</span>
			}
<span class="css">			<span class="selector-class">.city</span> <span class="selector-tag">div</span><span class="selector-class">.pulse4</span> {</span>
<span class="css">				<span class="selector-tag">animation-delay</span>: 1<span class="selector-class">.2s</span>;</span>
			}
<span class="css">			<span class="selector-class">.city</span> <span class="selector-tag">div</span><span class="selector-class">.pulse5</span> {</span>
<span class="css">				<span class="selector-tag">animation-delay</span>: 1<span class="selector-class">.6s</span>;</span>
			}
<span class="css">			<span class="keyword">@keyframes</span> pulse {</span>
<span class="css">				0{}</span>
				60% {
					width: 40px;
					height: 40px;
<span class="css">					<span class="selector-tag">opacity</span>: 1; <span class="comment">/* 必须写，因为后面需要用到*/</span></span>
				}
				90% {
					width: 60px;
					height: 60px;
<span class="css">					<span class="selector-tag">opacity</span>: 0<span class="selector-class">.4</span>;</span>
				}
				100% {
					width: 70px;
					height: 70px;
					opacity: 0;
				}
			}
			
		<span class="tag"></<span class="name">style</span>></span>
	<span class="tag"></<span class="name">head</span>></span>
	<span class="tag"><<span class="name">body</span>></span>
		<span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"city"</span>></span>
			<span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"dotted"</span>></span><span class="tag"></<span class="name">div</span>></span>
			<span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"pulse1"</span>></span><span class="tag"></<span class="name">div</span>></span>
			<span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"pulse2"</span>></span><span class="tag"></<span class="name">div</span>></span>
			<span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"pulse3"</span>></span><span class="tag"></<span class="name">div</span>></span>
			<span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"pulse4"</span>></span><span class="tag"></<span class="name">div</span>></span>
			<span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"pulse5"</span>></span><span class="tag"></<span class="name">div</span>></span>
		<span class="tag"></<span class="name">div</span>></span>
	<span class="tag"></<span class="name">body</span>></span>
<span class="tag"></<span class="name">html</span>></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>实例链接： <a href="http://codehouse9.gitee.io/wave">http://codehouse9.gitee.io/wave</a></p>
<h3 id="案例二-打字机"><a href="#案例二-打字机" class="headerlink" title="案例二 - 打字机"></a>案例二 - 打字机</h3><pre class="line-numbers language-highlight html"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword"><code class="language-highlight html"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>></span>
<span class="tag"><<span class="name">html</span>></span>
	<span class="tag"><<span class="name">head</span>></span>
		<span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>></span>
		<span class="tag"><<span class="name">title</span>></span><span class="tag"></<span class="name">title</span>></span>
		<span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span>
			div {
				overflow: hidden;
				width: 0px;
				height: 30px;
				margin: 50px auto;
				white-space: nowrap;
				font-size: 20px;
				border-right: 1px solid hotpink;
<span class="css">				<span class="selector-tag">animation</span>: <span class="selector-tag">step</span> 8<span class="selector-tag">s</span> <span class="selector-tag">steps</span>(11) <span class="selector-tag">infinite</span> <span class="selector-tag">forwards</span>,<span class="selector-tag">borderColor</span> 0<span class="selector-class">.3s</span> <span class="selector-tag">steps</span>(60,<span class="selector-tag">end</span>) <span class="selector-tag">infinite</span> <span class="selector-tag">alternate</span>;</span>
			}
<span class="css">			<span class="keyword">@keyframes</span> step{</span>
				0% {
					width: 0;
				}
				50% {
					width: 220px;
				}
				100% {
					width: 0;
				}
			}
<span class="css">			<span class="keyword">@keyframes</span> borderColor{</span>
				from{
					border-color: transparent;
				}
				50% {
					border-color: white;
				}
				100% {
					border-color: hotpink;
				}
			}
		<span class="tag"></<span class="name">style</span>></span>
	<span class="tag"></<span class="name">head</span>></span>
	<span class="tag"><<span class="name">body</span>></span>
		<span class="tag"><<span class="name">div</span>></span>我想你了算了你不喜欢我<span class="tag"></<span class="name">div</span>></span>
	<span class="tag"></<span class="name">body</span>></span>
<span class="tag"></<span class="name">html</span>></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<p>实例预览地址： <a href="http://codehouse9.gitee.io/typewriter">http://codehouse9.gitee.io/typewriter</a></p>
<h2 id="3D-转换"><a href="#3D-转换" class="headerlink" title="3D 转换"></a>3D 转换</h2><p>3D就是比2D多了个Z轴</p>
<h3 id="3D移动-translate3d-x-y-z"><a href="#3D移动-translate3d-x-y-z" class="headerlink" title="3D移动 translate3d(x,y,z);"></a>3D移动 translate3d(x,y,z);</h3><p>transform: translateZ(100px); 向外移动(我们眼睛方向)100px; Z轴的效果要借助透视才能看得到。</p>
<h3 id="透视-perspective"><a href="#透视-perspective" class="headerlink" title="透视 perspective"></a>透视 perspective</h3><p>理解：网页页面是一个2D的平面，要想在2D平面呈现3D效果，就需要借助透视。所谓透视就是视距：我们眼睛到屏幕的距离，所以视距近(小)，3D物体反而被放大了，视距越远(大)物体越小。</p>
<p>注意：透视需要写在被观察元素的父盒子上面；translateZ值越大，离我们的眼睛越近，物体越大，值越小，离我们的眼睛越远，物体越小。自己想象…。</p>
<h3 id="3D旋转"><a href="#3D旋转" class="headerlink" title="3D旋转"></a>3D旋转</h3><p>rotateZ() 就是我们眼睛看到的，和2D的rotate()没有啥区别。</p>
<p>rotate3d(x,y,z,deg); rotate3d(1,1,0,45deg) x和Y轴旋转45deg，z轴不旋转,貌似是y=x旋转</p>
<h3 id="transform-style设置子盒子呈现3D效果"><a href="#transform-style设置子盒子呈现3D效果" class="headerlink" title="transform-style设置子盒子呈现3D效果"></a>transform-style设置子盒子呈现3D效果</h3><p>transform-style: preserver-3d; 这个属性也是设置在父盒子上面。</p>
<h3 id="案例1-翻转盒子"><a href="#案例1-翻转盒子" class="headerlink" title="案例1-翻转盒子"></a>案例1-翻转盒子</h3><pre class="line-numbers language-highlight html"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword"><code class="language-highlight html"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>></span>
<span class="tag"><<span class="name">html</span>></span>
	<span class="tag"><<span class="name">head</span>></span>
		<span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>></span>
		<span class="tag"><<span class="name">title</span>></span><span class="tag"></<span class="name">title</span>></span>
		<span class="tag"><<span class="name">style</span>></span>
<span class="css">			<span class="selector-class">.box</span> {</span>
				position: relative;
				width: 300px;
				height: 300px;
				margin: 100px auto;
<span class="css">				<span class="selector-tag">transition</span>: <span class="selector-tag">all</span> <span class="selector-class">.4s</span> 50<span class="selector-tag">ms</span>;</span>
				transform-style: preserve-3d;
			}
<span class="css">			<span class="selector-class">.box</span><span class="selector-pseudo">:hover</span> {</span>
				transform: rotateY(180deg);
			}
<span class="css">			<span class="selector-class">.box</span> <span class="selector-class">.forward</span>,</span>
<span class="css">			<span class="selector-class">.box</span> <span class="selector-class">.back</span> {</span>
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				text-align: center;
				line-height: 300px;
				border-radius: 50%;
				font-size: 25px;
				color: white;
			}
<span class="css">			<span class="selector-class">.box</span> <span class="selector-class">.forward</span> {</span>
				background-color: pink;
				z-index: 10;
			}
<span class="css">			<span class="selector-class">.box</span> <span class="selector-class">.back</span> {</span>
				background-color: purple;
				transform: rotateY(180deg);
			}
		<span class="tag"></<span class="name">style</span>></span>
	<span class="tag"></<span class="name">head</span>></span>
	<span class="tag"><<span class="name">body</span>></span>
		<span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box"</span>></span>
			<span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"forward"</span>></span>XXX<span class="tag"></<span class="name">div</span>></span>
			<span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"back"</span>></span>我讨厌你<span class="tag"></<span class="name">div</span>></span>
		<span class="tag"></<span class="name">div</span>></span>
	<span class="tag"></<span class="name">body</span>></span>
<span class="tag"></<span class="name">html</span>></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
<h3 id="案例2-矩形翻转"><a href="#案例2-矩形翻转" class="headerlink" title="案例2 - 矩形翻转"></a>案例2 - 矩形翻转</h3><pre class="line-numbers language-highlight html"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword"><code class="language-highlight html"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>></span>
<span class="tag"><<span class="name">html</span>></span>
	<span class="tag"><<span class="name">head</span>></span>
		<span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>></span>
		<span class="tag"><<span class="name">title</span>></span><span class="tag"></<span class="name">title</span>></span>
		<span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span>
			*{
				padding: 0;
				margin: 0;
			}
			ul {
				width: 520px;
				margin: 50px auto;
<span class="css">				<span class="comment">/* perspective: 500px; */</span></span>
			}
			li {
				position: relative;
				list-style: none;
				float: left;
				margin: 0 5px;
				width: 120px;
				height: 35px;
				line-height: 35px;
				text-align: center;
				transform-style: preserve-3d;
<span class="css">				<span class="selector-tag">transition</span>: <span class="selector-tag">all</span> <span class="selector-class">.3s</span>;</span>
			}
<span class="css">			<span class="selector-tag">li</span><span class="selector-pseudo">:hover</span> {</span>
				transform: rotateX(90deg);
			}
			div {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}
<span class="css">			<span class="selector-class">.box1</span> {</span>
				background-color: pink;
<span class="css">				<span class="selector-tag">transform</span>: <span class="selector-tag">translateZ</span>(17<span class="selector-class">.5px</span>);</span>
				z-index: 1;
			}
<span class="css">			<span class="selector-class">.box2</span> {</span>
				background-color: purple;
				transform: translateY(50%) rotateX(-90deg);
			}
		<span class="tag"></<span class="name">style</span>></span>
	<span class="tag"></<span class="name">head</span>></span>
	<span class="tag"><<span class="name">body</span>></span>
		<span class="tag"><<span class="name">ul</span>></span>
			<span class="tag"><<span class="name">li</span>></span>
				<span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box1"</span>></span>盒子翻转<span class="tag"></<span class="name">div</span>></span>
				<span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box2"</span>></span>不配拥有爱情<span class="tag"></<span class="name">div</span>></span>
			<span class="tag"></<span class="name">li</span>></span>
			<span class="tag"><<span class="name">li</span>></span>
				<span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box1"</span>></span>盒子翻转<span class="tag"></<span class="name">div</span>></span>
				<span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box2"</span>></span>不配拥有爱情<span class="tag"></<span class="name">div</span>></span>
			<span class="tag"></<span class="name">li</span>></span>
			<span class="tag"><<span class="name">li</span>></span>
				<span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box1"</span>></span>盒子翻转<span class="tag"></<span class="name">div</span>></span>
				<span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box2"</span>></span>不配拥有爱情<span class="tag"></<span class="name">div</span>></span>
			<span class="tag"></<span class="name">li</span>></span>
			<span class="tag"><<span class="name">li</span>></span>
				<span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box1"</span>></span>盒子翻转<span class="tag"></<span class="name">div</span>></span>
				<span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"box2"</span>></span>不配拥有爱情<span class="tag"></<span class="name">div</span>></span>
			<span class="tag"></<span class="name">li</span>></span>
			
		<span class="tag"></<span class="name">ul</span>></span>
	<span class="tag"></<span class="name">body</span>></span>
<span class="tag"></<span class="name">html</span>></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>效果预览： <a href="http://codehouse9.gitee.io/box_flip">http://codehouse9.gitee.io/box_flip</a></p>
<p>###案例3 - 旋转相册</p>
<pre class="line-numbers language-highlight html"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword"><code class="language-highlight html"><span class="meta">&lt;!DOCTYPE <span class="meta-keyword">html</span>></span>
<span class="tag"><<span class="name">html</span>></span>
	<span class="tag"><<span class="name">head</span>></span>
		<span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span>></span>
		<span class="tag"><<span class="name">title</span>></span>旋转木马<span class="tag"></<span class="name">title</span>></span>
		<span class="tag"><<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>></span>
			* {
				padding: 0;
				margin: 0;
			}
			body {
				perspective: 1300px;
			}
			ul {
				position: relative;
				width: 200px;
				height: 300px;
				margin: 100px auto;
				background: url(./1.jpg) no-repeat left/200px 300px;
				transform-style: preserve-3d;
				animation: rot 8s linear infinite forwards;
			}
<span class="css">			<span class="selector-tag">ul</span><span class="selector-pseudo">:hover</span> {</span>
				animation-play-state: paused;
			}
<span class="css">			<span class="keyword">@keyframes</span> rot{</span>
<span class="css">				<span class="selector-tag">from</span>{}</span>
				to{
					transform: rotateY(360deg);
				}
			}
			li {
				position: absolute;
				left: 0;
				top: 0;
				list-style: none;
				width: 100%;
				height: 100%;
			}
<span class="css">			<span class="selector-tag">li</span><span class="selector-pseudo">:first-child</span> {</span>
				transform: translateZ(300px);
			}
<span class="css">			<span class="selector-tag">li</span><span class="selector-pseudo">:nth-child(2)</span> {</span>
				transform: rotateY(60deg) translateZ(300px);
			}
<span class="css">			<span class="selector-tag">li</span><span class="selector-pseudo">:nth-child(3)</span> {</span>
				transform: rotateY(120deg) translateZ(300px);
			}
<span class="css">			<span class="selector-tag">li</span><span class="selector-pseudo">:nth-child(4)</span> {</span>
				transform: rotateY(180deg) translateZ(300px);
			}
<span class="css">			<span class="selector-tag">li</span><span class="selector-pseudo">:nth-child(5)</span> {</span>
				transform: rotateY(240deg) translateZ(300px);
			}
<span class="css">			<span class="selector-tag">li</span><span class="selector-pseudo">:nth-child(6)</span> {</span>
				transform: rotateY(300deg) translateZ(300px);
			}
			li img {
				width: 100%;
				height: 100%;
			}
		<span class="tag"></<span class="name">style</span>></span>
	<span class="tag"></<span class="name">head</span>></span>
	<span class="tag"><<span class="name">body</span>></span>
		<span class="tag"><<span class="name">ul</span>></span>
			<span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"1.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span>></span><span class="tag"></<span class="name">li</span>></span>
			<span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"1.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span>></span><span class="tag"></<span class="name">li</span>></span>
			<span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"1.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span>></span><span class="tag"></<span class="name">li</span>></span>
			<span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"1.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span>></span><span class="tag"></<span class="name">li</span>></span>
			<span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"1.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span>></span><span class="tag"></<span class="name">li</span>></span>
			<span class="tag"><<span class="name">li</span>></span><span class="tag"><<span class="name">img</span> <span class="attr">src</span>=<span class="string">"1.jpg"</span> <span class="attr">alt</span>=<span class="string">""</span>></span><span class="tag"></<span class="name">li</span>></span>
		<span class="tag"></<span class="name">ul</span>></span>
	<span class="tag"></<span class="name">body</span>></span>
<span class="tag"></<span class="name">html</span>></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>预览地址： <a href="http://codehouse9.gitee.io/rotating_album">http://codehouse9.gitee.io/rotating_album</a></p>
<p>##浏览器私有前缀<br>私有前缀是为了兼容各个浏览器的低版本问题</p>
<ul>
<li>-moz- : 火狐</li>
<li>-ms- : IE</li>
<li>-webkit- : 谷歌 safari</li>
<li>-o- : Opera</li>
</ul>
<h2 id="css书写顺序"><a href="#css书写顺序" class="headerlink" title="css书写顺序"></a>css书写顺序</h2><ol>
<li>布局定位属性：display/position/float/clrea/visibility/overflow</li>
<li>自身属性：width/height/margin/padding/background</li>
<li>文本属性：color/font/text-decoration/text-align/line-height/vertical-align/white-space/break-word</li>
<li>其实属性(css3)：content/cursor/border-radius/box-shadow/text-shadow/background:liner-gradient</li>
</ol>
<h2 id="网页制作注意点"><a href="#网页制作注意点" class="headerlink" title="网页制作注意点"></a>网页制作注意点</h2><ul>
<li>nav导航栏可以不设置宽度，以后可以继续添加文字</li>
<li>因为导航栏里面的文字不一样多，所以最好是给a链接设置左右的padding撑开盒子，而不是指定宽度</li>
<li>行内样式之间默认的会有一条缝隙，使用浮动解决</li>
<li>如果一个盒子既有left又有right属性，则默认的是先左后右，与优先级和书写先后位置无关。</li>
</ul>
<script>
        document.querySelectorAll('.github-emoji')
          .forEach(el => {
            if (!el.dataset.src) { return; }
            const img = document.createElement('img');
            img.style = 'display:none !important;';
            img.src = el.dataset.src;
            img.addEventListener('error', () => {
              img.remove();
              el.style.color = 'inherit';
              el.style.backgroundImage = 'none';
              el.style.background = 'none';
            });
            img.addEventListener('load', () => {
              img.remove();
            });
            document.body.appendChild(img);
          });
      </script>
            </div>
            <hr/>

            

    <div class="reprint" id="reprint-statement">
        
            <div class="reprint__author">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-user">
                        文章作者:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="/blog/about" rel="external nofollow noreferrer">LanHuiYan</a>
                </span>
            </div>
            <div class="reprint__type">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-link">
                        文章链接:
                    </i>
                </span>
                <span class="reprint-info">
                    <a href="http://codehouse9.gitee.io/blog/5bdd.html">http://codehouse9.gitee.io/blog/5bdd.html</a>
                </span>
            </div>
            <div class="reprint__notice">
                <span class="reprint-meta" style="font-weight: bold;">
                    <i class="fas fa-copyright">
                        版权声明:
                    </i>
                </span>
                <span class="reprint-info">
                    本博客所有文章除特別声明外，均采用
                    <a href="https://creativecommons.org/licenses/by/4.0/deed.zh" rel="external nofollow noreferrer" target="_blank">CC BY 4.0</a>
                    许可协议。转载请注明来源
                    <a href="/blog/about" target="_blank">LanHuiYan</a>
                    !
                </span>
            </div>
        
    </div>

    <script async defer>
      document.addEventListener("copy", function (e) {
        let toastHTML = '<span>复制成功，请遵循本文的转载规则</span><button class="btn-flat toast-action" onclick="navToReprintStatement()" style="font-size: smaller">查看</a>';
        M.toast({html: toastHTML})
      });

      function navToReprintStatement() {
        $("html, body").animate({scrollTop: $("#reprint-statement").offset().top - 80}, 800);
      }
    </script>



            <div class="tag_share" style="display: block;">
                <div class="post-meta__tag-list" style="display: inline-block;">
                    
                        <div class="article-tag">
                            
                                <a href="/blog/tags/html/">
                                    <span class="chip bg-color">html</span>
                                </a>
                            
                                <a href="/blog/tags/css/">
                                    <span class="chip bg-color">css</span>
                                </a>
                            
                        </div>
                    
                </div>
                <div class="post_share" style="zoom: 80%; width: fit-content; display: inline-block; float: right; margin: -0.15rem 0;">
                    <link rel="stylesheet" type="text/css" href="/blog/libs/share/css/share.min.css">
<div id="article-share">

    
    <div class="social-share" data-sites="twitter,facebook,google,qq,qzone,wechat,weibo,douban" data-wechat-qrcode-helper="<p>微信扫一扫即可分享！</p>"></div>
    <script src="/blog/libs/share/js/social-share.min.js"></script>
    

    

</div>

                </div>
            </div>
            
                <style>
    #reward {
        margin: 40px 0;
        text-align: center;
    }

    #reward .reward-link {
        font-size: 1.4rem;
        line-height: 38px;
    }

    #reward .btn-floating:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    #rewardModal {
        width: 320px;
        height: 350px;
    }

    #rewardModal .reward-title {
        margin: 15px auto;
        padding-bottom: 5px;
    }

    #rewardModal .modal-content {
        padding: 10px;
    }

    #rewardModal .close {
        position: absolute;
        right: 15px;
        top: 15px;
        color: rgba(0, 0, 0, 0.5);
        font-size: 1.3rem;
        line-height: 20px;
        cursor: pointer;
    }

    #rewardModal .close:hover {
        color: #ef5350;
        transform: scale(1.3);
        -moz-transform:scale(1.3);
        -webkit-transform:scale(1.3);
        -o-transform:scale(1.3);
    }

    #rewardModal .reward-tabs {
        margin: 0 auto;
        width: 210px;
    }

    .reward-tabs .tabs {
        height: 38px;
        margin: 10px auto;
        padding-left: 0;
    }

    .reward-content ul {
        padding-left: 0 !important;
    }

    .reward-tabs .tabs .tab {
        height: 38px;
        line-height: 38px;
    }

    .reward-tabs .tab a {
        color: #fff;
        background-color: #ccc;
    }

    .reward-tabs .tab a:hover {
        background-color: #ccc;
        color: #fff;
    }

    .reward-tabs .wechat-tab .active {
        color: #fff !important;
        background-color: #22AB38 !important;
    }

    .reward-tabs .alipay-tab .active {
        color: #fff !important;
        background-color: #019FE8 !important;
    }

    .reward-tabs .reward-img {
        width: 210px;
        height: 210px;
    }
</style>

<div id="reward">
    <a href="#rewardModal" class="reward-link modal-trigger btn-floating btn-medium waves-effect waves-light red">赏</a>

    <!-- Modal Structure -->
    <div id="rewardModal" class="modal">
        <div class="modal-content">
            <a class="close modal-close"><i class="fas fa-times"></i></a>
            <h4 class="reward-title">你的赏识是我前进的动力</h4>
            <div class="reward-content">
                <div class="reward-tabs">
                    <ul class="tabs row">
                        <li class="tab col s6 alipay-tab waves-effect waves-light"><a href="#alipay">支付宝</a></li>
                        <li class="tab col s6 wechat-tab waves-effect waves-light"><a href="#wechat">微 信</a></li>
                    </ul>
                    <div id="alipay">
                        <img src="/blog/medias/reward/alipay.jpg" class="reward-img" alt="支付宝打赏二维码">
                    </div>
                    <div id="wechat">
                        <img src="/blog/medias/reward/wechat.jpg" class="reward-img" alt="微信打赏二维码">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('.tabs').tabs();
    });
</script>

            
        </div>
    </div>

    

    

    

    

    

    

    

<article id="prenext-posts" class="prev-next articles">
    <div class="row article-row">
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge left-badge text-color">
                <i class="fas fa-chevron-left"></i>&nbsp;上一篇</div>
            <div class="card">
                <a href="/blog/4688.html">
                    <div class="card-image">
                        
                        
                        <img src="/blog/medias/featureimages/5.jpg" class="responsive-img" alt="前端面试题">
                        
                        <span class="card-title">前端面试题</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            一.es6新特性es6 ECMAscript js的规范

let变量的特点:(1) 不存在变量的提升(2)同一个作用域下不能重复定义同一个变量(3)存在严格的作用域    var属于函数作用域  let块级作用域(4)存在暂时性死区
co
                        
                    </div>
                    <div class="publish-info">
                        <span class="publish-date">
                            <i class="far fa-clock fa-fw icon-date"></i>2020-08-01
                        </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/blog/categories/%E5%89%8D%E7%AB%AF/" class="post-category">
                                    前端
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/blog/tags/js/">
                        <span class="chip bg-color">js</span>
                    </a>
                    
                    <a href="/blog/tags/es6/">
                        <span class="chip bg-color">es6</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge right-badge text-color">
                下一篇&nbsp;<i class="fas fa-chevron-right"></i>
            </div>
            <div class="card">
                <a href="/blog/6ee.html">
                    <div class="card-image">
                        
                        
                        <img src="/blog/medias/featureimages/11.jpg" class="responsive-img" alt="Icomoon和iconfont字体图标库的使用">
                        
                        <span class="card-title">Icomoon和iconfont字体图标库的使用</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            一、 下载地址
icomoon 下载地址在国外，下载速度有点慢，但是字体图标比较齐全

Iconfont-阿里巴巴矢量图标库下载速度较快，有引用步骤在这里只介绍icomoon的使用，Iconfont-阿里巴巴矢量图标库相对来说自带教程，上手
                        
                    </div>
                    <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2020-07-13
                            </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/blog/categories/%E5%89%8D%E7%AB%AF/" class="post-category">
                                    前端
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/blog/tags/icomoon/">
                        <span class="chip bg-color">icomoon</span>
                    </a>
                    
                    <a href="/blog/tags/iconfont/">
                        <span class="chip bg-color">iconfont</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
    </div>
</article>

</div>


<script>
    $('#articleContent').on('copy', function (e) {
        // IE8 or earlier browser is 'undefined'
        if (typeof window.getSelection === 'undefined') return;

        var selection = window.getSelection();
        // if the selection is short let's not annoy our users.
        if (('' + selection).length < Number.parseInt('500')) {
            return;
        }

        // create a div outside of the visible area and fill it with the selected text.
        var bodyElement = document.getElementsByTagName('body')[0];
        var newdiv = document.createElement('div');
        newdiv.style.position = 'absolute';
        newdiv.style.left = '-99999px';
        bodyElement.appendChild(newdiv);
        newdiv.appendChild(selection.getRangeAt(0).cloneContents());

        // we need a <pre> tag workaround.
        // otherwise the text inside "pre" loses all the line breaks!
        if (selection.getRangeAt(0).commonAncestorContainer.nodeName === 'PRE') {
            newdiv.innerHTML = "<pre>" + newdiv.innerHTML + "</pre>";
        }

        var url = document.location.href;
        newdiv.innerHTML += '<br />'
            + '来源: codeHose9<br />'
            + '文章作者: LanHuiYan<br />'
            + '文章链接: <a href="' + url + '">' + url + '</a><br />'
            + '本文章著作权归作者所有，任何形式的转载都请注明出处。';

        selection.selectAllChildren(newdiv);
        window.setTimeout(function () {bodyElement.removeChild(newdiv);}, 200);
    });
</script>


<!-- 代码块功能依赖 -->
<script type="text/javascript" src="/blog/libs/codeBlock/codeBlockFuction.js"></script>

<!-- 代码语言 -->

<script type="text/javascript" src="/blog/libs/codeBlock/codeLang.js"></script>


<!-- 代码块复制 -->

<script type="text/javascript" src="/blog/libs/codeBlock/codeCopy.js"></script>


<!-- 代码块收缩 -->

<script type="text/javascript" src="/blog/libs/codeBlock/codeShrink.js"></script>


<!-- 代码块折行 -->


    </div>
    <div id="toc-aside" class="expanded col l3 hide-on-med-and-down">
        <div class="toc-widget">
            <div class="toc-title"><i class="far fa-list-alt"></i>&nbsp;&nbsp;目录</div>
            <div id="toc-content"></div>
        </div>
    </div>
</div>

<!-- TOC 悬浮按钮. -->

<div id="floating-toc-btn" class="hide-on-med-and-down">
    <a class="btn-floating btn-large bg-color">
        <i class="fas fa-list-ul"></i>
    </a>
</div>


<script src="/blog/libs/tocbot/tocbot.min.js"></script>
<script>
    $(function () {
        tocbot.init({
            tocSelector: '#toc-content',
            contentSelector: '#articleContent',
            headingsOffset: -($(window).height() * 0.4 - 45),
            collapseDepth: Number('0'),
            headingSelector: 'h2, h3, h4'
        });

        // modify the toc link href to support Chinese.
        let i = 0;
        let tocHeading = 'toc-heading-';
        $('#toc-content a').each(function () {
            $(this).attr('href', '#' + tocHeading + (++i));
        });

        // modify the heading title id to support Chinese.
        i = 0;
        $('#articleContent').children('h2, h3, h4').each(function () {
            $(this).attr('id', tocHeading + (++i));
        });

        // Set scroll toc fixed.
        let tocHeight = parseInt($(window).height() * 0.4 - 64);
        let $tocWidget = $('.toc-widget');
        $(window).scroll(function () {
            let scroll = $(window).scrollTop();
            /* add post toc fixed. */
            if (scroll > tocHeight) {
                $tocWidget.addClass('toc-fixed');
            } else {
                $tocWidget.removeClass('toc-fixed');
            }
        });

        
        /* 修复文章卡片 div 的宽度. */
        let fixPostCardWidth = function (srcId, targetId) {
            let srcDiv = $('#' + srcId);
            if (srcDiv.length === 0) {
                return;
            }

            let w = srcDiv.width();
            if (w >= 450) {
                w = w + 21;
            } else if (w >= 350 && w < 450) {
                w = w + 18;
            } else if (w >= 300 && w < 350) {
                w = w + 16;
            } else {
                w = w + 14;
            }
            $('#' + targetId).width(w);
        };

        // 切换TOC目录展开收缩的相关操作.
        const expandedClass = 'expanded';
        let $tocAside = $('#toc-aside');
        let $mainContent = $('#main-content');
        $('#floating-toc-btn .btn-floating').click(function () {
            if ($tocAside.hasClass(expandedClass)) {
                $tocAside.removeClass(expandedClass).hide();
                $mainContent.removeClass('l9');
            } else {
                $tocAside.addClass(expandedClass).show();
                $mainContent.addClass('l9');
            }
            fixPostCardWidth('artDetail', 'prenext-posts');
        });
        
    });
</script>

    

</main>




    <footer class="page-footer bg-color">
    
        <link rel="stylesheet" href="/blog/libs/aplayer/APlayer.min.css">
<style>
    .aplayer .aplayer-lrc p {
        
        display: none;
        
        font-size: 12px;
        font-weight: 700;
        line-height: 16px !important;
    }

    .aplayer .aplayer-lrc p.aplayer-lrc-current {
        
        display: none;
        
        font-size: 15px;
        color: #42b983;
    }

    
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
        left: -66px !important;
    }

    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
        left: 0px !important;
    }

    
</style>
<div class="">
    
    <div class="row">
        <meting-js class="col l8 offset-l2 m10 offset-m1 s12"
                   server="netease"
                   type="playlist"
                   id="503838841"
                   fixed='true'
                   autoplay='true'
                   theme='#42b983'
                   loop='all'
                   order='random'
                   preload='auto'
                   volume='0.5'
                   list-folded='true'
        >
        </meting-js>
    </div>
</div>

<script src="/blog/libs/aplayer/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

    
    <div class="container row center-align" style="margin-bottom: 15px !important;">
        <div class="col s12 m8 l8 copy-right">
            Copyright&nbsp;&copy;
            <span id="year">2020</span>
            <a href="/blog/about" target="_blank">LanHuiYan</a>
            |&nbsp;Powered by&nbsp;<a href="https://hexo.io/" target="_blank">Hexo</a>
            |&nbsp;Theme&nbsp;<a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">Matery</a>
            <br>
            
            &nbsp;<i class="fas fa-chart-area"></i>&nbsp;站点总字数:&nbsp;<span
                class="white-color">42.8k</span>&nbsp;字
            
            
            
            
            
            
            <span id="busuanzi_container_site_pv">
                |&nbsp;<i class="far fa-eye"></i>&nbsp;总访问量:&nbsp;<span id="busuanzi_value_site_pv"
                    class="white-color"></span>&nbsp;次
            </span>
            
            
            <span id="busuanzi_container_site_uv">
                |&nbsp;<i class="fas fa-users"></i>&nbsp;总访问人数:&nbsp;<span id="busuanzi_value_site_uv"
                    class="white-color"></span>&nbsp;人
            </span>
            
            <br>
            
            <span id="sitetime">载入运行时间...</span>
            <script>
                function siteTime() {
                    var seconds = 1000;
                    var minutes = seconds * 60;
                    var hours = minutes * 60;
                    var days = hours * 24;
                    var years = days * 365;
                    var today = new Date();
                    var startYear = "2020";
                    var startMonth = "6";
                    var startDate = "16";
                    var startHour = "0";
                    var startMinute = "0";
                    var startSecond = "0";
                    var todayYear = today.getFullYear();
                    var todayMonth = today.getMonth() + 1;
                    var todayDate = today.getDate();
                    var todayHour = today.getHours();
                    var todayMinute = today.getMinutes();
                    var todaySecond = today.getSeconds();
                    var t1 = Date.UTC(startYear, startMonth, startDate, startHour, startMinute, startSecond);
                    var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
                    var diff = t2 - t1;
                    var diffYears = Math.floor(diff / years);
                    var diffDays = Math.floor((diff / days) - diffYears * 365);
                    var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
                    var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) /
                        minutes);
                    var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
                        diffMinutes * minutes) / seconds);
                    if (startYear == todayYear) {
                        document.getElementById("year").innerHTML = todayYear;
                        document.getElementById("sitetime").innerHTML = "本站已安全运行 " + diffDays + " 天 " + diffHours +
                            " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
                    } else {
                        document.getElementById("year").innerHTML = startYear + " - " + todayYear;
                        document.getElementById("sitetime").innerHTML = "本站已安全运行 " + diffYears + " 年 " + diffDays +
                            " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
                    }
                }
                setInterval(siteTime, 1000);
            </script>
            
            <br>
            
            <span id="icp"><img src="/blog/medias/icp.png" style="vertical-align: text-bottom;" />
                <a href="http://www.beian.miit.gov.cn/" target="_blank">备案信息：赣ICP备20200706号-1</a>
            </span>
            
        </div>
        <div class="col s12 m4 l4 social-link social-statis">
    <a href="https://github.com/codeHouse9/codeHouse9.github.io" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>



    <a href="mailto:3295849115@qq.com" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>







    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=3295849115" class="tooltipped" target="_blank" data-tooltip="QQ联系我: 3295849115" data-position="top" data-delay="50">
        <i class="fab fa-qq"></i>
    </a>





    <a href="https://www.zhihu.com/people/wei-mi-de-xia-tian/asks" class="tooltipped" target="_blank" data-tooltip="关注我的知乎: https://www.zhihu.com/people/wei-mi-de-xia-tian/asks" data-position="top" data-delay="50">
        <i class="fab fa-zhihu1">知</i>
    </a>

<!-- 

    <a href="/blog/atom.xml" class="tooltipped" target="_blank" data-tooltip="RSS 订阅" data-position="top" data-delay="50">
        <i class="fas fa-rss"></i>
    </a>
 -->
</div>
    </div>
</footer>

<div class="progress-bar"></div>


    <!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title"><i class="fas fa-search"></i>&nbsp;&nbsp;搜索</span>
            <input type="search" id="searchInput" name="s" placeholder="请输入搜索的关键字"
                   class="search-input">
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script src="/blog/js/search.js"></script>
<script type="text/javascript">
$(function () {
    searchFunc("/blog/search.xml", 'searchInput', 'searchResult');
});
</script>

    <!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>


    <script src="/blog/libs/materialize/materialize.min.js"></script>
    <script src="/blog/libs/masonry/masonry.pkgd.min.js"></script>
    <script src="/blog/libs/aos/aos.js"></script>
    <script src="/blog/libs/scrollprogress/scrollProgress.min.js"></script>
    <script src="/blog/libs/lightGallery/js/lightgallery-all.min.js"></script>
    <script src="/blog/js/matery.js"></script>

    <!-- Baidu Analytics -->

    <!-- Baidu Push -->

<script>
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

    
    <script src="/blog/libs/others/clicklove.js" async="async"></script>
    
    
    <script async src="/blog/libs/others/busuanzi.pure.mini.js"></script>
    

    

    

    
    <script type="text/javascript" color="0,0,255"
        pointColor="0,0,255" opacity='0.7'
        zIndex="-1" count="66"
        src="/blog/libs/background/canvas-nest.js"></script>
    

    
    
    <script type="text/javascript" size="150" alpha='0.6'
        zIndex="-1" src="/blog/libs/background/ribbon-refresh.min.js" async="async"></script>
    

    
    <script type="text/javascript" src="/blog/libs/background/ribbon-dynamic.js" async="async"></script>
    

    
    <script src="/blog/libs/instantpage/instantpage.js" type="module"></script>
    

<script src="/blog/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"scale":1,"hHeadPos":0.5,"vHeadPos":0.618,"jsonPath":"/blog/live2dw/assets/shizuku.model.json"},"display":{"superSample":2,"width":150,"height":320,"position":"right","hOffset":50,"vOffset":-20},"mobile":{"show":false,"scale":0.8},"react":{"opacityDefault":0.7,"opacityOnHover":0.5},"log":false});</script></body>

</html>
